<template>
  <div class="home-container">
    <div class="header">
      <div class="header-left">
        <span class="logo">企业管理系统</span>
      </div>
      <div class="header-right">
        <span class="user-info">欢迎，{{ userInfo.username || '用户' }}</span>
        <el-button type="text" @click="handleLogout">退出登录</el-button>
      </div>
    </div>
    <div class="content">
      <el-card class="welcome-card">
        <template #header>
          <div class="card-header">
            <span>系统信息</span>
          </div>
        </template>
        <div class="welcome-content">
          <h2>欢迎使用企业管理系统</h2>
          <p>这是一个基于Vue 3和Spring Security的前后端分离项目。</p>
          <div class="system-info">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="当前时间">{{ currentTime }}</el-descriptions-item>
              <el-descriptions-item label="登录状态">已登录</el-descriptions-item>
              <el-descriptions-item label="权限信息">用户权限</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const userInfo = ref(JSON.parse(localStorage.getItem('userInfo') || '{}'))
const currentTime = ref('')
let timer = null

// 更新当前时间
const updateCurrentTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

const handleLogout = () => {
  // 清除登录信息
  localStorage.removeItem('token')
  localStorage.removeItem('userInfo')
  ElMessage.success('退出登录成功')
  router.push('/login')
}

onMounted(() => {
  updateCurrentTime()
  timer = setInterval(updateCurrentTime, 1000)
  
  // 检查登录状态
  const token = localStorage.getItem('token')
  if (!token) {
    ElMessage.warning('请先登录')
    router.push('/login')
  }
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped>
.home-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.header {
  height: 60px;
  background-color: #ffffff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.header-left .logo {
  font-size: 20px;
  font-weight: 600;
  color: #667eea;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-info {
  color: #606266;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.welcome-card {
  max-width: 800px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.welcome-content {
  padding: 20px 0;
}

.welcome-content h2 {
  color: #303133;
  margin-bottom: 16px;
}

.welcome-content p {
  color: #606266;
  margin-bottom: 24px;
  font-size: 16px;
}

.system-info {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .header {
    padding: 0 10px;
  }
  
  .header-left .logo {
    font-size: 18px;
  }
  
  .content {
    padding: 10px;
  }
  
  .welcome-content h2 {
    font-size: 20px;
  }
}
</style>